<template>
	<div>
		<div style="display: flex; justify-content: space-between; align-items: center">
			<div style="display: flex; justify-content: start; align-items: center">
				<SvgIcon name="ele-BellFilled" :size="20" style="color: var(--el-color-primary)" />
				<span style="font-size: 14px; margin-left: 2px; font-weight: 600">通知公告</span>
			</div>
			<div style="display: flex; justify-content: end; align-items: center;color: var(--el-text-color-secondary)">
				<span style="font-size: 12px; margin-right: 2px">查看全部</span>
				<SvgIcon name="ele-ArrowRight" :size="14" />
			</div>
		</div>
		<el-divider style="margin-top: 10px; margin-bottom: 10px" />
		<div class="bulletin-box">
			<ul class="bulletin-ul" v-if="state.bulletinList&&state.bulletinList.length>0">
				<li v-for="(v, k) in state.bulletinList" :key="k" class="bulletin-li">
					<div class="bulletin-li-title">
						{{ v.title }}
					</div>
					<div class="bulletin-li-time">
						{{ v.publishTimeText }}
					</div>
				</li>
			</ul>
            <el-empty v-else description="无公告" :image-size="60"/>
		</div>
	</div>
</template>

<script lang="ts" setup name="bulletinPage">
const VITE_APP_ID = import.meta.env.VITE_APP_ID as string;
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	//显示位置
	showPosition: {
		type: String,
		default: '10',
	},
	//显示条数
	pageSize: {
		type: Number,
		default: 10,
	},
});
//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------
const state = reactive({
	bulletinList: [],
});

//------------------定义调用方法-------------------------
const getBulletinList = () => {
	//获取通知公告
	//获取通知公告列表
	let params: any = { appId: VITE_APP_ID };
	params.articleType = 'notice';
	params.showPosition = props.showPosition;
	params.pageNum = 1;
	params.pageSize = props.pageSize;
	$api.common.send
		.post('article0001', params)
		.then((res: any) => {
			state.bulletinList = res.result.list || [];
		})
		.catch(() => {});
};
//-------------------------初始化-----------------------------
onMounted(() => {
	nextTick(() => {
		getBulletinList();
	});
});
</script>
<style scoped lang="scss">
.bulletin-box {
	height: 150px;
	overflow: hidden;
	.bulletin-ul {
		list-style: none;
		.bulletin-li {
			font-size: 14px;
			padding-bottom: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.bulletin-li-title {
				color: var(--el-text-color-regular);
				text-decoration: none;
			}
			.bulletin-li-time {
				font-size: 12px;
				color: var(--el-text-color-placeholder);
				text-decoration: none;
			}
			&:hover {
				.bulletin-li-title {
					color: var(--el-color-primary);
				}
				.bulletin-li-time {
					color: var(--el-color-primary);
				}
			}
		}
	}
}
</style>
